<template>
  <page-view :title="title" >
    <a-form slot="headerContent" layout="inline">
      <a-form-item>
        <a-input placeholder="配置键" v-model="key" @change="handleSearchChange"/>
      </a-form-item>
    </a-form>
    <template slot="action">
      <a-button type="primary" @click="handleCreateClicked">新增</a-button>
    </template>
    <a-card :bordered="false">
      <a-table :dataSource="list"
               rowKey="id"
               :pagination="false">
        <a-table-column title="序号" dataIndex="idx" key="idx">
          <template slot-scope="value, row, index">
            {{index+1}}
          </template>
        </a-table-column>
        <a-table-column title="配置键" dataIndex="key" key="key">
          <template slot-scope="value, row, index">
            <highlight-text :text="value" :keyword="key"></highlight-text>
          </template>
        </a-table-column>
        <a-table-column title="配置值" dataIndex="val" key="val"/>
        <a-table-column title="配置说明" dataIndex="desc" key="desc"/>
        <a-table-column title="更新时间" dataIndex="updated" key="updated">
          <template slot-scope="value, row, index">
            {{value|fromNow}}
          </template>
        </a-table-column>
        <a-table-column title="操作" key="action">
          <template slot-scope="value, row, index">
            <span>
              <a @click.prevent="handleEditClicked(row,index)">编辑</a>
              <a-divider type="vertical"/>
              <a-popconfirm title="确认删除？" @confirm="handleDeleteConfirmed(row,index)">
                <a @click.stop>删除</a>
              </a-popconfirm>
            </span>
          </template>
        </a-table-column>
      </a-table>
    </a-card>
    <config-create-drawer ref="configCreateDrawer" @success="handleCreateSuccess"></config-create-drawer>
    <config-edit-drawer ref="configEditDrawer" @success="handleEditSuccess"></config-edit-drawer>



  </page-view>
</template>

<script>

  import {findSysConfigs,deleteSysConfig} from '@/api/sysConfig'
  import {PageView} from '@/layouts'
  import {debounce} from 'lodash'
  import HighlightText from '@/components/HighlightText'
  import ConfigCreateDrawer from "./ConfigCreateDrawer"
  import ConfigEditDrawer from "./ConfigEditDrawer"

  export default {

    components: {
      ConfigCreateDrawer,
      ConfigEditDrawer,
      PageView,
      HighlightText
    },

    data() {
      return {
        key: '',
        list: [],
      }
    },

    computed: {
      title() {
        return this.$route.meta.title
      }
    },

    created() {
      this.queryData()
    },

    mounted() {
      this.handleSearchChange = debounce(this.handleSearchChange, 500)
    },

    methods: {

      queryData() {
        findSysConfigs(this.key).then(resp => {
          this.list = resp.result.list
        })
      },

      handleSearchChange() {
        this.queryData()
      },
      handleCreateClicked(){
        this.$refs.configCreateDrawer.open()
      },
      handleCreateSuccess(newRow){
        this.list.unshift(newRow)
        this.$message.success('添加配置成功')
      },
      handleEditClicked(row,index){
        this.$refs.configEditDrawer.open(row,index)
      },
      handleEditSuccess(newRow,index){
        this.list.splice(index,1,newRow)
        this.$message.success('更新配置成功')
      },
      handleDeleteConfirmed(row,index){
        deleteSysConfig(row.id).then(() => {
          this.list.splice(index, 1)
          this.$message.success('删除配置成功')
        })
      },


    }

  }
</script>

<style lang="less" scoped>
</style>
